<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>公告发布</title>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		 crossorigin="anonymous"></script>
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
		 crossorigin="anonymous">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
		 crossorigin="anonymous"></script>

		<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-bs4.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-bs4.min.js"></script>

		<link href="https://cdn.bootcss.com/mdui/0.4.3/css/mdui.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/mdui/0.4.3/js/mdui.min.js"></script>

	</head>
	<style type="text/css">
		body {
			align-content: center;
		}

		.mylabel {
			padding-top: 30px;
			padding-left: 20px;
			font-size: 20px;
		}

		#BasicInfo {
			border-radius: 15px;
			margin: 0 auto;
			align-content: center;
			width: 800px;
		}

		#ConInfo {
			padding-top: 15px;
			border-radius: 15px;
			margin: 30px auto;
			align-content: center;
			width: 800px;
		}

		#PhotoInfo {
			padding-top: 15px;
			border-radius: 15px;
			margin: 30px auto;
			align-content: center;
			width: 800px;
		}

		.mdui-textfield {
			margin-right: 40px;
			margin-left: 40px;
		}

		.Separate {
			padding-bottom: 30px;
		}

		#addImg {
			margin-left: 15px;
		}

		#submitButton {
			text-align: center;
			margin-bottom: 30px;
		}

		.uploadArea {
			padding: 20px;
		}

		#fuwenben {
			margin-top: 15px;
		}
	</style>
	<body class="mdui-theme-primary-light-blue mdui-theme-accent-blue" onload="initSummernote()">

		<h2 class="mdui-text-color-theme">发布公告</h2>


		<div id="content">

			<form id="form" method="post" enctype="multipart/form-data">

				<div id="BasicInfo" class="mdui-shadow-5">

					<div id="basicInfoLabel" class="mylabel">一、公告信息</div>


					<div class="mdui-textfield">
						<label class="mdui-textfield-label">公告发布部门</label>
						<input class="mdui-textfield-input required" type="text" id="noticePart" name="noticePart" required />
						<div class="mdui-textfield-error">此项不能为空</div>
					</div>

					<div class="mdui-textfield">
						<label class="mdui-textfield-label">公告标题</label>
						<input class="mdui-textfield-input required" type="text" id="noticeTitle" name="noticeTitle" required />
						<div class="mdui-textfield-error">此项不能为空</div>
					</div>
					<div class="mdui-textfield">
						<label class="mdui-textfield-label">公告副标题</label>
						<input class="mdui-textfield-input required" type="text" id="noticeSecTitle" name="noticeSecTitle" required />
						<div class="mdui-textfield-error">此项不能为空</div>
					</div>

					<div class="Separate"></div>

				</div>




				<div id="ConInfo" class="mdui-shadow-5">

					<div id="roomInfoLabel" class="mylabel">二、公告内容</div>


					<div id="fuwenben">
						<textarea id="summernote" data-type="formdata"></textarea>

					</div>

					<div class="Separate"></div>
				</div>

				<div id="PhotoInfo" class="mdui-shadow-5">
					<div id="photoInfoLabel" class="mylabel">三、图片介绍</div>
					<div class="uploadArea"><span>上传封面图片:</span><input type="file" id="file" name="file"></div>
					
				</div>

				<div class="Separate"></div>

			</form>

			<div id="submitButton">
				<button id="submit" class="mdui-btn mdui-color-theme-accent mdui-ripple" onclick="infoSubmit()">提交</button>
			</div>


		</div>





	</body>
	<script>
		var $$ = mdui.JQ;
		var userid = JSON.parse(sessionStorage.getItem("userid"))
		console.log(userid)
		var qmh = "";


		/**
		 * 初始化富文本框 summernote
		 * */
		function initSummernote() {
			$('#summernote').summernote({
				lang: 'zh-CN',
				height: 300,
				minHeight: null, // set minimum height of editor
				maxHeight: null, // set maximum height of editor
				focus: true,


				callbacks: {
					//上传回调
					onImageUpload: function(files) { //the onImageUpload API
						var type = $(this).data('type');
						$.each(files, function(i, item) {
							sendFile(item);
						});
					},
					//删除回调
					/** onMediaDelete: function (target) {
					     deleteFile(target);
					 } **/
				}
			});
			//解决选择图片时 打开本地文件夹时，有延时问题。
			$('.note-image-input').prop('accept', 'image/jpeg, image/jpg, image/png, image/gif');
		}
		/**
		 * Summernote 上传图片到服务器
		 * @param {any} file 图片文件
		 * @param {string} type 图片类型，在textarea 标签 中 添加 data-type 属性 英文 小写
		 */
		function sendFile(file) {
			data = new FormData();
			data.append("file", file); //根据实际情况传参
			$.ajax({
				data: data,
				type: "POST",
				url: "http://prehealth.top/pre2.0/Images",
				cache: false,
				contentType: false,
				processData: false,
				success: function(data) {


					$("#summernote").summernote('editor.insertImage', data);
					qmh = qmh + data + ';';
					console.log(qmh)

					// the insertImage API


				},
				error: function() {
					alert('上传失败!');
				}
			});
		}
		/**
		 * Summernote 删除到服务器中的图片
		 * @param {object} target//回调参数
		 */

		/** function deleteFile(target) {
		     var picUrl = target.attr('src');
		     $.ajax({
		         data: { },
		         type: "POST",
		         url: "/",
		         processData: true,
		         success: function (result) {
		         },
		         error: function () {
		             alert('删除失败!');
		         }
		     });
		 
		 } */


		function infoSubmit() {

			$$("#submit").attr("disabled", "true");

			console.log(qmh)
			var sHTML = $('#summernote').summernote('code');

			console.log(sHTML)
			var formdata = new FormData(document.getElementById("form"));
			formdata.append("userId", userid);
			formdata.append("noticeState", "1");
			formdata.append("noticePic", qmh)
			formdata.append("noticeText", sHTML);
			mdui.snackbar({
				message: '上传中...',
				position: 'right-top'
			});
			$$.ajax({
				method: 'POST',
				url: 'http://prehealth.top/pre2.0/notice',
				contentType: false,
				data: formdata,
				success: function(data) {
					$$("#submit").removeAttr("disabled");
					mdui.snackbar({
						message: '提交成功',
						position: 'right-top'
					});
				},
				fail: function() {
					$$("#submit").removeAttr("disabled");
					mdui.snackbar({
						message: '提交失败',
						position: 'right-top'
					});
				}
			});
		}
	</script>
</html>
